<template>
  <div class="fieldList">
    <el-card>
      <el-table ref="dragTable" :data="userTable" style="width: 100%">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="label" label="字段描述"> </el-table-column>
        <el-table-column prop="prop" label="列表字段"> </el-table-column>
        <el-table-column prop="label" label="筛选显示类型">
          <template #default="scope">
            <el-select v-model="scope.row.queryShowType">
              <el-option label="字符串输入框" value="input" />
              <el-option label="字典筛选" value="select" />
              <el-option label="数字输入框" value="number" />
              <el-option label="日期范围（时分秒）" value="datetimerange" />
              <el-option label="日期范围" value="daterange" />
              <el-option label="年多选" value="years" />
              <el-option label="月筛选" value="month" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="label" label="查询方式">
          <template #default="scope">
            <el-select v-model="scope.row.queryType">
              <el-option label="=" value="EQ" />
              <el-option label="!=" value="NE" />
              <el-option label=">" value="GT" />
              <el-option label=">=" value="GTE" />
              <el-option label="<" value="LT" />
              <el-option label="<=" value="LTE" />
              <el-option label="LIKE" value="LIKE" />
              <el-option label="BETWEEN" value="BETWEEN" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="label" label="字典类型">
          <template #default="scope">
            <span v-if="scope.row.queryShowType == 'select'" class="red mr10"
              >*</span
            >
            <el-select
              v-model="scope.row.dict"
              placeholder="请输入"
              size="mini"
              clearable
              style="width: 140px"
            >
              <el-option label="不固定" value="" />
              <el-option label="固定到列头" value="left" />
              <el-option label="固定到列尾" value="right" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div class="aic jcc mt20">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  shallowRef,
  toRaw,
  nextTick,
} from "vue";
import { userTableFields } from "../mock/index";
import { loadAsyncComponent } from "/@ts/plugins/components";
import { routerOpenPage } from "/@ts/hooks/route";
import { ElMessage } from "element-plus";

const userTable = ref(userTableFields);
const draggingIndex = shallowRef(null); // 记录拖拽行的索引
// 项目列表数据
const dragTable = ref();
const state = reactive({});
const isShow = shallowRef(false);

const handleSave = () => {
  //   userTable 校验数组 如果当前对象 queryShowType == 'select' 则必填
  const isPass = userTable.value.every((item) => {
    // 遍历 userTable 数组中的每个元素
    if (item.queryShowType == "select") {
      // 如果元素的 queryShowType 属性为 'select'
      return item.dict;
      // 返回该元素的 dict 属性（如果存在则返回 true，否则返回 false）
    }
    return true;
    // 如果 queryShowType 不是 'select'，则返回 true
  });
  if (!isPass) {
    ElMessage.error("请完善必填项");
    return;
  }
};
onMounted(() => {});
const filterList = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "已选择",
    value: "1",
  },
  {
    label: "未选择",
    value: "0",
  },
];
</script>

<style scoped lang="scss">
.fieldList {
}
</style>
